<template>
  <view class="register-container">
    <view class="header">
      <view class="title">注册账号</view>
      <view class="subtitle">开启您的账号之旅</view>
    </view>

    <view class="form-section">
      <view class="input-group">
        <text class="label">账号</text>
        <input
          class="input"
          type="text"
          v-model="form.account"
          placeholder="请输入账号"
          maxlength="20"
        />
      </view>

      <view class="input-group">
        <text class="label">密码</text>
        <input
          class="input"
          type="password"
          v-model="form.password"
          placeholder="请输入密码（不少于6位）"
          password
        />
      </view>

      <view class="input-group">
        <text class="label">确认密码</text>
        <input
          class="input"
          type="password"
          v-model="form.confirmPassword"
          placeholder="请再次输入密码"
          password
        />
      </view>

      <view class="tips">
        <text class="tip-text">密码由6-20位字母、数字或符号组成</text>
      </view>

      <view class="button-group">
        <button
          class="submit-button"
          :disabled="!isFormValid"
          :class="{ disabled: !isFormValid }"
          @tap="handleRegister"
        >
          注册
        </button>

        <button class="login-button" @tap="goToLogin">返回登录</button>
      </view>

      <view class="agreement">
        <checkbox
          :checked="form.agreement"
          @tap="form.agreement = !form.agreement"
          color="#9370DB"
        />
        <text class="agreement-text">
          我已阅读并同意
          <text class="link" @tap="showAgreement">《用户协议》</text>
          和
          <text class="link" @tap="showPrivacy">《隐私政策》</text>
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface RegisterForm {
  account: string
  password: string
  confirmPassword: string
  agreement: boolean
}

const form = ref<RegisterForm>({
  account: '',
  password: '',
  confirmPassword: '',
  agreement: false,
})

const isFormValid = computed(() => {
  return (
    form.value.account.length >= 4 &&
    form.value.password.length >= 6 &&
    form.value.password === form.value.confirmPassword &&
    form.value.agreement
  )
})

const handleRegister = () => {
  if (!isFormValid.value) return

  if (form.value.password !== form.value.confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none',
    })
    return
  }

  // TODO: 调用注册接口
  uni.showLoading({
    title: '注册中...',
  })

  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '注册成功',
      icon: 'success',
    })

    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }, 1500)
}

const goToLogin = () => {
  uni.navigateBack()
}

const showAgreement = () => {
  uni.showToast({
    title: '用户协议',
    icon: 'none',
  })
}

const showPrivacy = () => {
  uni.showToast({
    title: '隐私政策',
    icon: 'none',
  })
}
</script>

<style lang="scss">
// 薰衣草紫主题色
$theme-color: #9370db;
$light-theme-color: #e6e6fa;
$text-color: #ffffff;
$border-color: rgba(255, 255, 255, 0.2);

.register-container {
  min-height: 100vh;
  background: linear-gradient(180deg, $theme-color 0%, $light-theme-color 100%);
  padding: 0;

  .header {
    padding: 60rpx 40rpx 40rpx;

    .title {
      font-size: 48rpx;
      color: #ffffff;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .subtitle {
      font-size: 32rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }

  .form-section {
    padding: 40rpx;

    .input-group {
      margin-bottom: 40rpx;

      .label {
        font-size: 28rpx;
        color: #ffffff;
        margin-bottom: 20rpx;
        display: block;
      }

      .input {
        height: 90rpx;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 45rpx;
        padding: 0 40rpx;
        font-size: 28rpx;
        color: #ffffff;

        &::placeholder {
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }

    .tips {
      margin: -20rpx 0 40rpx;
      padding: 0 20rpx;

      .tip-text {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.6);
      }
    }

    .button-group {
      margin: 60rpx 0;
      display: flex;
      flex-direction: column;
      gap: 30rpx;

      .submit-button {
        width: 100%;
        height: 90rpx;
        background: #ffffff;
        color: $theme-color;
        border-radius: 45rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        border: none;
        font-weight: bold;

        &.disabled {
          background: rgba(255, 255, 255, 0.5);
          color: rgba(147, 112, 219, 0.5);
        }

        &::after {
          border: none;
        }
      }

      .login-button {
        width: 100%;
        height: 90rpx;
        background: transparent;
        color: #ffffff;
        border: 2rpx solid rgba(255, 255, 255, 0.8);
        border-radius: 45rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;

        &::after {
          border: none;
        }
      }
    }

    .agreement {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;

      .agreement-text {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
      }

      .link {
        color: #ffffff;
        text-decoration: underline;
      }
    }
  }
}
</style>
